<template>
  <div>
    <HeaderView></HeaderView>
    <div class="advert-box">
      <el-form class="form-box" ref="form" size="medium" :model="advForm" label-width="110px">
        <el-form-item label="启动广告名称" required >
          <el-input v-model="advForm.splashName"></el-input>
        </el-form-item>
        <el-form-item label="启动广告图" required>
          <div class="image-container" @mouseenter="showButton" @mouseleave="hideButton">
            <el-image v-if="splashPath" :src="splashPath"></el-image>
            <div class="buttons">
              <el-button style="margin: 5px" v-if="showButtons"  size="mini" type="primary"
                         @click.stop="upload">图库上传
              </el-button>
              <el-upload :http-request="fileRequest"
                         action="" ref="upload">
                <el-button style="margin: 5px" v-if="showButtons" size="mini" type="primary">本地上传
                </el-button>
              </el-upload>
            </div>
          </div>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button @click="preserve" type="primary">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--图库-->
    <el-dialog title="上传文件"
               :visible.sync="fileWin" width="1000px">
      <div class="dialog-height">
        <div class="img-box">
          <el-radio-group v-model="selectedIndex" size="small">
            <el-radio-button :label="index" v-for="(item, index) in fileList" :key="index">
              <el-image @click="selectImage(index,item.picUrl)" style="width: 200px; height: 200px"
                        :src="item.picUrl"></el-image>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <el-button @click="fileWin = false">取 消</el-button>
      <el-button @click="fileWin = false" type="primary">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import HeaderView from "@/views/layout/headerView.vue";
import {getResource, getSplash, updateSplash, uploadResource} from "@/api/common";
import {completionUrl, splitImageUrl} from "@/utils/common";

export default {
  components: {HeaderView},
  data() {
    return {
      advForm: {
        splashName: "",
        splashPath: ""
      },

      dialogImageUrl: '',
      dialogVisible: false,

      // 文件
      fileWin:false,
      showButtons: true,
      splashPath: "",
      // 服务器图片
      fileList: [],
      selectedImageUrl: '',
      selectedIndex: null,
    }
  },
  created() {
    getSplash().then(resp=>{
      // resp.data.data.splashPath=completionUrl(resp.data.data.splashPath)
      this.advForm=resp.data.data
      this.splashPath=completionUrl(resp.data.data.splashPath)
    })
  },
  methods:{
    preserve(){
      // 修改广告配置请求
      updateSplash(this.advForm)

      this.$message({
        message:"操作成功",
        type:'success'
      })
    },
    // 文件处理
    // 服务器图片上传
    upload(){
      this.fileWin = true
      console.log("点击了图库")
      getResource('image').then(response=>{
        console.log(response)
        response.data.data.forEach(item=>{
          var picUrl=completionUrl(item)
          this.fileList.push({picUrl:picUrl})
        })
      })
    },
    // 本地图片上传
    fileRequest(f) {
      let file=f.file
      const formData=new FormData
      formData.append('file',file)
      //upload为上传的接口
      uploadResource('image',formData).then(res => {
        this.addForm.picUrl=res.data.data
        this.imageUrl= completionUrl(res.data.data)
      });
    },
    // 图片选中
    selectImage(index, splashPath) {
      console.log(splashPath)
      this.advForm.splashPath=splitImageUrl(splashPath)
      this.splashPath=splashPath
    },
    // 上传图片选择按钮
    showButton() {
      this.showButtons = true;
    },
    hideButton() {
      this.showButtons = false;
    },
  }
}
</script>

<style scoped lang="scss">
.dialog-height {
  height: 600px;
  overflow-y: auto;
}
.image-container {
  display: flex;
  flex-direction: column;
  width: 148px;
  height: 148px;
  border: 1px dotted skyblue;
  border-radius: 4px;
  position: relative;
  margin: 10px;
}

.buttons {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin: 30px 30px;
}

.image-container:hover button {
  display: block;
}

.advert-box {
  width: 1200px;
  height: 680px;
  margin: 30px auto;
  flex-direction: column;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  overflow: auto;

  border-radius: 4px;
  border: 1px solid #ebeef5;
}
.form-box{
  margin: 40px;
}

</style>